{% extends "base.html" %}
{% block title %}hdfs查询{% endblock %}
{% block head %}
    <script src="static/js/tree.jquery.js"></script>
    <link rel="stylesheet" href="static/css/jqtree.css">
    <style>
        .block-style ul.jqtree-tree {
            margin-left: 0;
        }

        .block-style ul.jqtree-tree ul.jqtree_common {
            margin-left: 2em;
        }

        .block-style ul.jqtree-tree .jqtree-element {
            margin-bottom: 3px;
            background-color: #ddd;
            padding: 3px;
        }

        .block-style ul.jqtree-tree .jqtree-element .jqtree-title {
            margin-left: 0;
        }

        .block-style ul.jqtree-tree li.jqtree-selected > .jqtree-element,
        .block-style ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
            background: #97BDD6;
            text-shadow: none;
        }

        #tree1 {
            max-height: 700px;
            overflow-y: auto;
            user-select: none;
        }
    </style>
{% endblock %}
{% block contentheader %}HDFS查询{% endblock %}
{% block contentsmallheader %}HDFS文件、路径{% endblock %}
{% block content %}
    <div class="box box-primary ng-scope">
        <div class="box-header with-border">
            <table style="padding: 5px;">
                <tr>
                    <td style="width: 70px"><label style="height:30px; line-height:30px;">Path:    </label></td>
                    <td style="width: 270px">
                        <div><input type="text" style="height: 30px;width: 250px" id="path"/></div>
                    </td>
                    <td>
                        <button id="submit" style="height:30px;width:100px" class="btn btn-primary">确定</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50px"><label style="height:30px; line-height:30px;">常用路径:    </label></td>
                    <td style="width: 270px">
                        <a id="submit_con1" style="height:30px;width:250px" class="btn btn-info">
                            /user/dp/camus/topics
                        </a>
                    </td>
                    <td>
                        <button id="submit_con2" style="height:30px;width:250px" class="btn btn-info">
                            /user/hive/warehouse
                        </button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="box-body" id="tree_parent">
            <div id="tree1" class='block-style' data-url="/hdfs_nodes"></div>
        </div>
    </div>

{% endblock %}
{% block script %}
    <script type="text/javascript">
        var root = [
            {
                "info": "root",
                "label": "/",
                "id": '/',
                "load_on_demand": true
            }
        ];
        $("button[id^='submit_con']").on('click', function (e) {
            var path = e.target.innerText;
            root[0].info = path;
            root[0].label = path;
            root[0].id = path;
            $('#tree1').remove();
            $('#tree_parent').append("<div id='tree1' class='block-style' data-url='/hdfs_nodes'></div>");
            initialTree();
        });
        $('#submit').on('click', function () {
            if ($('#path').val().trim() == '') {
                return;
            }
            root[0].info = $('#path').val();
            root[0].label = $('#path').val();
            root[0].id = $('#path').val();
            $('#tree1').remove();
            $('#tree_parent').append("<div id='tree1' class='block-style' data-url='/hdfs_nodes'></div>");
            initialTree();
        });
        function initialTree() {
            $('#tree1').tree({
                data: root,
                onCreateLi: function (node, $li) {
                    $li.find('.jqtree-element').append(
                        '<span class="label pull-right  label-primary">' + node.info + '</span>'
                    );
                }
            });
        }
        $(function () {
            initialTree();
        });
        function add_class() {
            $('#treeview3').addClass('active');
            $('#menu3').addClass('menu-open');
            $('#datasqueryhdfs').addClass('active');
        }
    </script>
{% endblock %}